// mixin  ： 混入  像函数 ；
// 函数的定义和调用 

// 一、普通的定义和调用函数 
// 定义一个.common函数
// .common{
//     width: 100px;
//     height: 100px;
// }

// .box1{
//     .common;  //调用common函数
//     background-color: red;
// }

// .box2{
//     .common;  // 调用函数；
//     background-color: blue;
// }


// 二、函数的传参
// .common(@w,@h){
//     width: @w;
//     height: @h;
// }

// .box1{
//     .common(100px, 200px);
//     background-color: red;
// }

// .box2{
//     .common(200px, 300px);
//     background-color: blue;
// }


// 三 给默认参数 
// 默认参数 有参数传入 以传入的参数为准 ，如果没有参数传入那么以默认参数为准
// .commonStyle(@w:100px,@h:200px){
//     width: @w;
//     height: @h;
// }

// .box1{
//     .commonStyle(108px);
//     border: 1px solid;
// }
// .box2{
//     .commonStyle();
//     border: 1px solid;
// }


// 四、函数的作用域 ；
.container{
    .common(@a){
        width: @a;
        height: 100px;
    }
}

.box1{
    .container .common(108px);  // 调用 container内的 common样式 
    border: 1px solid;
}
